HTMLify
style.css
Views: 23 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | /* Import Google font - Montserrat*/ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff 50%, #99d128 50%); } .container { position: relative; max-width: 300px; width: 100%; border-radius: 12px; padding: 15px 25px 25px; background: #fff; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } header { color: #333; margin-bottom: 20px; font-size: 18px; font-weight: 600; text-align: center; } .input_field { position: relative; height: 45px; margin-top: 15px; width: 100%; } .refresh_button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: #14141c; height: 30px; width: 30px; border: none; border-radius: 4px; color: #fff; cursor: pointer; } .refresh_button:active { transform: translateY(-50%) scale(0.98); } .input_field input, .button button { height: 100%; width: 100%; outline: none; border: none; border-radius: 8px; } .input_field input { padding: 0 15px; border: 1px solid rgba(0, 0, 0, 0.1); } .captch_box input { color: #6b6b6b; font-size: 22px; pointer-events: none; } .captch_input input:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } .message { font-size: 14px; margin: 14px 0; color: #222620; display: none; } .message.active { display: block; } .button button { background: #14141c; color: #fff; cursor: pointer; user-select: none; } .button button:active { transform: scale(0.99); } .button.disabled { opacity: 0.9; pointer-events: none; } |